<template>
  <div class="inputDom">
    <input
      :type="msg.type"
      :placeholder="msg.holder"
      v-model="val"
      :class="{error:!isValid}"
      @blur="handleBlur"
    />
  </div>
</template>

<script>
export default {
  props: ["msg", "rule", "err_msg"],
  data() {
    return {
      val: "",
      isValid: true,
    };
  },
  watch: {
    val() {
      //强制输入框为空的时候为合法
      if (!this.val) {
        this.isValid = true;
      } else {
        //判断输入是否合法
        if (this.rule.test(this.val)) {
          console.log("符合要求");
          this.isValid = true;
        } else {
          console.log(this.err_msg);
          this.isValid = false;
        }
      }
      //将输入框变化后的值传给父组件
      this.$emit("valChange", this.val);
    },
  },
  methods: {
    //输入框鼠标失去焦点出发函数
    handleBlur() {
      if (!this.isValid) {
        // alert(this.err_msg);
        this.$toast.fail(this.err_msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inputDom {
  input {
    width: 100%;
    color: #fff;
    outline: none;
    border: none;
    border-bottom: 1px solid #ccc;
    line-height: 50/360 * 100vw;
    font-size: 18/360 * 100vw;
    margin-bottom: 30/360 * 100vw;
    background: none;
    &::-webkit-input-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #fff;
    }
  }
  .error {
    border-bottom: 1px solid red;
  }
}
</style>